<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
    <div>测试首页111</div>
    <video class="video"></video>
    <script>
        // alert(111)
        let front = false;
        let constraints = { 
            audio: true, 
            video: { 
                width: 1280, 
                height: 720,
                facingMode: (front ? "user" : "environment")
            } 
        };
        let screenWidth = window.screen.width;
        let $ = selector => {
            return document.querySelector(selector);
        }
        window.log = console.log;
        let video = $(".video");
        video.style.width = screenWidth + "px";
        video.style.height = "320px";
        // log(navigator.mediaDevices.getUserMedia);
        // alert(navigator.mediaDevices.getUserMedia)
        // navigator.mediaDevices.getUserMedia({video: {width: screenWidth, height: 320}}).then(data => {
        navigator.mediaDevices.getUserMedia(constraints).then(data => {
            // console.log(data);
            alert("成功");
            video.src = URL.createObjectURL(data);
            video.play();
            // video.srcObject = mediaStream;
            // video.onloadedmetadata = function(e) {
            //     video.play();
            // };
        }).catch(err => {
            // alert(JSON.stringify(err));
            // console.log(typeof err);
            // console.log(err.getOwnPropertyNames);
        });
    </script>
</body>
</html>